<template>
  <div style="height: 100%">
    <div class="box">
      <ul class="oul">
        <li
          v-for="(item, index) in goodslis"
          :key="index"
          @click="getcolor(index)"
          :class="{ color: ind == index }"
        >
          <a :href="'#' + item.name">
            <span>{{ item.name }}</span>
          </a>
        </li>
      </ul>

      <div class="right">
        <ol>
          <li v-for="tim in goodslis" :key="tim">
            <h3 :id="tim.name">{{ tim.name }}</h3>
            <ul>
              <li v-for="time1 in tim.foods" :key="time1">
                <div class="box2">
                  <img :src="time1.image" alt="" />
                  <div>
                    <h2>{{ time1.name }}</h2>
                    <p>{{ time1.description }}</p>
                    <p>
                      <span>月售{{ time1.sellCount }}份</span>
                      <span>好评率{{ time1.rating }}%</span>
                    </p>
                    <h4>￥{{ time1.price }}</h4>
                  </div>
                  <section>
                    <span @click="jian(time1)">-</span>
                    <b>{{ time1.unm }}</b>
                    <span @click="jia(time1)">+</span>
                  </section>
                </div>
              </li>
            </ul>
          </li>
        </ol>
      </div>
    </div>
    <!-- <div class="bottom" > -->
    <div class="hei" v-show="hei" @click="hie"></div>
    <div class="ulli" v-show="hei">
      <p>
        <span>购物车</span>
        <span @click="qingkong()">清空</span>
      </p>
      <ul>
        <li v-for="item in arr" :key="item" v-show="item.unm > 0">
          <span>{{ item.name }}</span>
          <p>
            <a>￥{{ item.price }}</a>
            <span @click="jians(item)">-</span>
            <b>{{ item.unm }}</b>
            <span @click="jias(item)">+</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="gouwc">
      <p>
        <span @click="hie"></span>
        <b>￥{{ get }}</b>
      </p>
      <p>另需配送费￥4元</p>
      <p>还差￥10起送</p>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      arr: [],
      er: {},
      sun: 0,
      hei: false,
      ind: 0,
    };
  },
  created() {
    this.getGoods();
    console.log(this.goodslis);
  },
  mounted() {
    console.log(this.getGoods);
  },
  computed: {
    ...mapState(["goodslis"]),

    get() {
      let aa = 0;
      this.arr.forEach((item) => {
        aa += item.unm * item.price;
      });
      return aa;
    },
  },
  methods: {
    ...mapActions(["getGoods"]),

    jia(foods) {
      if (foods.unm == undefined) {
        foods.unm = 1;
        this.arr.push(foods);
      } else {
        foods.unm++;
      }

      // this.sun= foods.price*foods.unm

      console.log(this.arr);
    },
    jian(foods) {
      foods.unm--;
      if (foods.unm < 0) {
        foods.unm = 0;
      } else {
        this.er = false;
      }
    },
    jians(arr) {
      arr.unm--;
      if (arr.unm < 0) {
        arr.unm = 0;
      }
    },
    jias(arr) {
      arr.unm++;
    },
    qingkong() {
      this.arr = [];
      this.getGoods();
    },
    hie() {
      this.hei = !this.hei;
      console.log(this.hei);
    },
    getcolor(index) {
      this.ind = index;
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  display: flex;
  height: 100%;
  overflow: hidden;
}
.box .oul {
  width: 80px;
  height: 100%;
  list-style: none;
  background-color: #f3f5f7;
}
.oul li {
  width: 80px;
  height: 54px;
  box-sizing: border-box;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-size: 12px;
}
.oul a {
  text-decoration: none;
  color: rgb(43, 51, 59);
}
.oul .color {
  background-color: #fff;
  font-weight: 600;
  color: black;
}
.oul li span {
  height: 54px;
  width: 56px;
  display: block;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(7, 17, 27, 0.1);
}

.right {
  width: 100%;
  height: 100vw;
  overflow: hidden;
  overflow-y: scroll;
}
ol {
  width: 100%;
  /* height: 100%; */
  list-style: none;
}
ol li h3 {
  height: 26px;
  width: 100%;
  font-size: 12px;
  color: rgb(147, 153, 159);
  box-sizing: border-box;
  padding-left: 14px;
  border-left: 2px solid #d9dde1;
  background-color: #f3f5f7;
  line-height: 26px;
}
ol > li {
  width: 100%;
  height: 100%;
}
.box2 {
  margin-top: 18px;
  margin-left: 18px;
  display: flex;
  position: relative;
}

.box2 img {
  width: 50px;
}
.box2 div {
  padding-left: 10px;
}
.box2 div h2 {
  font-size: 14px;
  color: rgb(7, 17, 27);
  line-height: 14px;
}
.box2 div p {
  font-size: 10px;
  color: rgb(147, 153, 159);
  line-height: 10px;
  margin-top: 8px;
}
.box2 div h4 {
  color: red;
}
ul {
  list-style: none;
}
section {
  position: absolute;
  right: 18px;
  bottom: 24px;
  width: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section span {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  background-color: skyblue;
}
section b {
  text-align: center;
  width: 20px;
  color: rgb(147, 153, 159);
}
.bottom {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  /* background-color: aqua; */
}
.hei {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(7, 17, 27, 0.6);
}
.gouwc {
  position: absolute;
  height: 50px;
  width: 100%;
  background-color: black;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  z-index: 100;
}
.gouwc p {
  width: 25%;
  border-right: 1px solid rgb(7, 17, 27, 0.6);
  line-height: 50px;
  display: inline-block;
  display: flex;
  justify-content: right;
}
.gouwc p span {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: skyblue;
  border: 10px solid black;
  position: absolute;
  left: 10px;
  bottom: 2px;
}
.gouwc p b {
  color: #fff;
  font-size: 20px;
  margin-left: 60%;
  padding-right: 10px;
  border-right: 1px solid rgba(209, 221, 234, 0.6);
}
.gouwc p + p {
  width: 40%;
  box-sizing: border-box;
  line-height: 50px;
  margin-left: 30px;
  color: #d9dde1;
  display: flex;
  justify-content: left;
}
.gouwc p + p + p {
  line-height: 50px;
  text-align: center;
  width: 100px;
  display: inline-block;
  background-color: rgb(43, 51, 59);
  width: 40%;
  box-sizing: border-box;
  line-height: 50px;
  margin-left: 30px;
  color: #d9dde1;
}
.ulli {
  position: absolute;
  bottom: 0;
  height: 305px;
  width: 100%;
  background-color: #fff;
  /* height: 100vw; */
  overflow: hidden;
  overflow-y: scroll;
}
.ulli p {
  width: 100%;
  height: 40px;
  background-color: #f3f5f7;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 18px;
  border-bottom: 1px solid rgb(7, 17, 27, 0.1);
}
.ulli p span {
  font-size: 14px;
  font-weight: 200;
  color: rgb(7, 17, 27);
  line-height: 40px;
}
.ulli p span + span {
  font-size: 12px;
  font-weight: 200;
  color: skyblue;
  line-height: 40px;
}
.ulli ul {
  width: 100%;
  /* height: 100%; */
  list-style: none;
  padding-left: 18px;

  /* padding-right: 18px; */
}
.ulli ul li {
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid rgb(7, 17, 27, 0.1);
  display: flex;
  justify-content: space-between;
  padding-right: 18px;
}
.ulli ul li span {
  font-size: 14px;
  color: black;
  font-weight: 200;
}
.ulli ul li p {
  display: inline-block;
  width: 30%;
  height: 48px;
  background-color: #fff;
  border: transparent;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-right: 18px;
}
.ulli ul li p span {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  background-color: skyblue;
}
.ulli ul li p a {
  font-size: 20px;
  color: red;
  font-weight: 600;
}
</style>
